<template>
    <div :class="['channelConfig',scrollClass]">
        <div class="configFrom">
            <p class="mb20" style="color: #363C43;font-weight: bold;">基本信息</p>
            <el-form :model="channelForm" :rules="rules" ref="channelForm" label-width="130px">
                <el-form-item label="渠道机器人名称" prop="robotName">
                    <el-input size="small" v-model="channelForm.robotName" />
                </el-form-item>
                <el-form-item label="机器人头像" prop="robotAvatarUrl">
                    <input type="file" @change="picChange('robotAvatarUrl',$event)" accept="image/*" id="robotAvatarUrl"
                           style="display:none" />
                    <div onclick="document.getElementById('robotAvatarUrl').click();" style="width: 100px;height:100px;cursor: pointer;">
                        <div v-if="channelForm.robotAvatarUrl == ''" class="addImg"><span class="iconfont icon-tianjia"></span>
                        </div>
                        <el-image v-else style="width: 100px;height: 100px;" :src="channelForm.robotAvatarUrl"></el-image>
                    </div>
                </el-form-item>
                <el-form-item label="知识集" prop="knowledgeSetIds" style="margin-bottom: 10px">
                    <a-select v-model="channelForm.knowledgeSetIds" style="width: 100%" mode="multiple"
                              :getPopupContainer="triggerNode => { return triggerNode.parentNode }">
                        <a-select-option v-for="item in knowledgeSetList" :key="item.id" :value="item.id">
                            {{ item.knowledgeSetName }}
                        </a-select-option>
                    </a-select>
                    <span style="color: #90979D">不填写则默认适用全部知识集内容</span>
                </el-form-item>
                <el-form-item label="欢迎语" required style="margin-bottom: 16px">
                    <p>
                        <el-button type="primary" size="small" plain @click="addWelcome">新增欢迎语</el-button>
                    </p>
                </el-form-item>
                <div class="channelCard" v-for="(item,i) in channelForm.welcome" :key="i">
                    <div class="cardTitle flexbetween">
                        <span>{{'欢迎语' + (i + 1)}}</span>
                        <div class="iconBtn">
                            <el-tooltip effect="light" content="上移" placement="top" :enterable="false">
                                <span :class="['iconfont', 'icon-xiangshangyiji',{'disabled': i == 0}]" @click="welcomeUp(i)"></span>
                            </el-tooltip>
                            <el-tooltip effect="light" content="下移" placement="top" :enterable="false">
                                <span :class="['iconfont', 'icon-xiangxiayiji',{'disabled': i == channelForm.welcome.length - 1}]"
                                      @click="welcomeDown(i)"></span>
                            </el-tooltip>
                            <el-tooltip effect="light" content="删除" placement="top" :enterable="false">
                                <span class="iconfont icon-shanchu" @click="delWelCome(i)" v-if="i != 0"></span>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="cardContent">
                        <el-form-item label="" :prop="`welcome.${i}.type`" class="cardSelect">
                            <el-select v-model="item.type" placeholder="请选择" size="small" style="width: 100%;">
                                <el-option label="文本" :value="1"></el-option>
                                <el-option label="富文本" :value="2"></el-option>
                                <el-option label="素材" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" :prop="`welcome.${i}.content`" v-show="item.type == 1" :rules="rules.content">
                            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="item.content"></el-input>
                        </el-form-item>
                        <el-form-item label="" :prop="`welcome.${i}.richContent`" v-show="item.type == 2" :rules="rules.richContent">
                            <tinymce v-model="item.richContent" :ref="'welcomeTiny'+i" @change="welRichTextChange(i)" :height="200">
                            </tinymce>
                        </el-form-item>
                        <el-form-item label="" :prop="`welcome.${i}.material`" v-if="item.type == 3" :rules="rules.material">
                            <material-select v-model="item.material" :materialType.sync="item.materialType"
                                             :content.sync="item.materialContent">
                            </material-select>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item label="欢迎语问题推荐" prop="welcomeRecStatus">
                    <el-switch v-model="channelForm.welcomeRecStatus" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <div v-show="channelForm.welcomeRecStatus == 1" style="padding-left: 80px">
                    <el-form-item label="前置说辞" prop="welcomePreDesc">
                        <el-input size="small" v-model="channelForm.welcomePreDesc" />
                    </el-form-item>
                    <el-form-item label="推荐问题" prop="welcomeRecQuestionType" required>
                        <el-radio v-model="channelForm.welcomeRecQuestionType" :label="1">智能推荐</el-radio>
                        <el-radio v-model="channelForm.welcomeRecQuestionType" :label="2">人工配置</el-radio>
                    </el-form-item>
                    <el-form-item prop="welcomeRecQuestions" :class="{'mb0':channelForm.welcomeRecQuestionType == 1}">
                        <rec-question v-if="channelForm.welcomeRecQuestionType == 2" :recList.sync="channelForm.welcomeRecQuestions">
                        </rec-question>
                    </el-form-item>
                </div>
                <el-form-item label="未知问题说辞" prop="unknownDesc.type" required>
                    <el-select v-model="channelForm.unknownDesc.type" placeholder="请选择" size="small" style="width: 100%;">
                        <el-option label="文本" :value="1"></el-option>
                        <el-option label="富文本" :value="2"></el-option>
                        <el-option label="素材" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-show="channelForm.unknownDesc.type == 1" prop="unknownDesc.content"
                              :rules="channelForm.unknownDesc.type == 1 ? rules.unknownDesc:[]">
                    <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="channelForm.unknownDesc.content"></el-input>
                </el-form-item>
                <el-form-item v-show="channelForm.unknownDesc.type == 2" prop="unknownDesc.richContent"
                              :rules="channelForm.unknownDesc.type == 2 ? rules.unknownDesc:[]">
                    <tinymce v-model="channelForm.unknownDesc.richContent" @change="unknownRichChange" :height="200"></tinymce>
                </el-form-item>
                <el-form-item v-if="channelForm.unknownDesc.type == 3" prop="unknownDesc.material"
                              :rules="channelForm.unknownDesc.type == 3 ? rules.unknownDesc:[]">
                    <material-select v-model="channelForm.unknownDesc.material" @change="unknownMaterialChange"
                                     :materialType.sync="channelForm.unknownDesc.materialType"
                                     :content.sync="channelForm.unknownDesc.materialContent">
                    </material-select>
                </el-form-item>
                <el-form-item label="未知问题转人工" prop="unknownManTakeStatus">
                    <el-switch v-model="channelForm.unknownManTakeStatus" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <div v-show="channelForm.unknownManTakeStatus == 1" style="padding-left: 125px">
                    <div class="flexFrom">
                        <span>转人工形式</span>
                        <el-select v-model="channelForm.unknownManTakeType" placeholder="请选择" size="small">
                            <el-option label="提示转人工" :value="1"></el-option>
                            <el-option label="自动转人工" :value="2"></el-option>
                        </el-select>
                    </div>
                    <div class="flexFrom">
                        <span>未知次数转人工</span>
                        <div>
                            <el-input v-model.number="channelForm.unknownManTakeTimes" type="number" style="width:80px" size="small"
                                      min="1">
                            </el-input>次
                        </div>
                    </div>
                </div>
                <el-form-item label="未知问题转推荐" prop="unknownRecStatus">
                    <el-switch v-model="channelForm.unknownRecStatus" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <div v-show="channelForm.unknownRecStatus == 1" style="padding-left: 80px">
                    <el-form-item label="前置说辞" prop="unknownRecDesc">
                        <el-input size="small" v-model="channelForm.unknownRecDesc" />
                    </el-form-item>
                    <el-form-item label="推荐问题" prop="unknownRecType" required>
                        <el-radio v-model="channelForm.unknownRecType" :label="1">智能推荐</el-radio>
                        <el-radio v-model="channelForm.unknownRecType" :label="2">人工配置</el-radio>
                    </el-form-item>
                    <el-form-item prop="unknownRecQuestions" :class="{'mb0':channelForm.unknownRecType == 1}">
                        <rec-question v-if="channelForm.unknownRecType == 2" :recList.sync="channelForm.unknownRecQuestions">
                        </rec-question>
                    </el-form-item>
                </div>
                <el-form-item label="寒暄库" prop="greetingStatus">
                    <el-switch v-model="channelForm.greetingStatus" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>

                <p class="mb20" style="color: #363C43;font-weight: bold;">引导语卡片</p>
                <el-form-item prop="guideCards">
                    <guideCards :guideCards.sync="channelForm.guideCards" />
                </el-form-item>

                <p class="mb20" style="color: #363C43;font-weight: bold;">引导胶囊</p>
                <el-form-item prop="guideCapsules">
                    <guideCapsules :guideCapsules.sync="channelForm.guideCapsules" />
                </el-form-item>
            </el-form>

        </div>
        <div class="preview">
            <p style="color: #363C43;font-weight: bold;">效果预览</p>
            <div class="channelPreview">
                <div :class="['previewContent',{'hasCapsules' : channelForm.guideCapsules.length > 0}]">
                    <p class="titleTime">{{new Date().toLocaleString()}}</p>
                    <dir class="robot" v-for="(item,i) in channelForm.welcome" :key="i">
                        <el-image :src="channelForm.robotAvatarUrl">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-user-solid"></i>
                            </div>
                        </el-image>
                        <div class="msg" v-show="item.type == 1">{{item.content?item.content:"请输入内容"}}</div>
                        <div class="msg" v-show="item.type == 2" v-html="item.richContent?item.richContent:'请输入内容'"></div>
                        <div v-if="item.type == 3 && item.materialContent" class="material">
                            <div v-if="item.materialType == 'graphics'" class="graphics">
                                <div v-for="(atc, num) in item.materialContent.contentList" class="graphicsItem">
                                    <img :src="atc.picurl" :alt="atc.title">
                                    <p class="title">{{atc.title}}</p>
                                </div>
                            </div>
                            <div v-else-if="item.materialType == 'picture'" class="picture">
                                <img :src="item.materialContent.url">
                            </div>
                            <div v-else-if="item.materialType == 'voice'">
                                <audio :src="item.materialContent.url" controls></audio>
                            </div>
                            <div v-else-if="item.materialType == 'video'">
                                <video :src="item.materialContent.url" controls></video>
                            </div>
                            <div v-else-if="item.materialType == 'file'" class="msg" style="max-width: 100%">
                                <el-link :href="item.materialContent.url" target="_blank" type="primary">{{item.materialContent.fileName}}
                                </el-link>
                            </div>
                        </div>
                    </dir>
                    <div class="robotRec" v-show="channelForm.welcomeRecStatus == 1">
                        <p :class="['preDesc',{'mb20':channelForm.welcomeRecQuestionType == 2}]">
                            {{channelForm.welcomePreDesc?channelForm.welcomePreDesc:"欢迎语问题推荐前置说辞"}}</p>
                        <div v-show="channelForm.welcomeRecQuestionType == 2">
                            <div class="recQuestion" v-for="(item,i) in channelForm.welcomeRecQuestions" :key="i" :title="item.question">
                                {{item.question}}
                            </div>
                        </div>
                    </div>
                    <dir class="robot">
                        <el-image :src="channelForm.robotAvatarUrl">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-user-solid"></i>
                            </div>
                        </el-image>
                        <div class="msg" v-show="channelForm.unknownDesc.type == 1">
                            {{channelForm.unknownDesc.content?channelForm.unknownDesc.content:"未知问题说辞"}}</div>
                        <div class="msg" v-show="channelForm.unknownDesc.type == 2"
                             v-html="channelForm.unknownDesc.richContent?channelForm.unknownDesc.richContent:'未知问题说辞'"></div>
                        <div v-if="channelForm.unknownDesc.type == 3 && channelForm.unknownDesc.materialContent" class="material">
                            <div v-if="channelForm.unknownDesc.materialType == 'graphics'" class="graphics">
                                <div v-for="(atc, num) in channelForm.unknownDesc.materialContent.contentList" class="graphicsItem">
                                    <img :src="atc.picurl" :alt="atc.title">
                                    <p class="title">{{atc.title}}</p>
                                </div>
                            </div>
                            <div v-else-if="channelForm.unknownDesc.materialType == 'picture'" class="picture">
                                <img :src="channelForm.unknownDesc.materialContent.url">
                            </div>
                            <div v-else-if="channelForm.unknownDesc.materialType == 'voice'">
                                <audio :src="channelForm.unknownDesc.materialContent.url" controls></audio>
                            </div>
                            <div v-else-if="channelForm.unknownDesc.materialType == 'video'">
                                <video :src="channelForm.unknownDesc.materialContent.url" controls></video>
                            </div>
                            <div v-else-if="channelForm.unknownDesc.materialType == 'file'" class="msg" style="max-width: 100%">
                                <el-link :href="channelForm.unknownDesc.materialContent.url" target="_blank" type="primary">
                                    {{channelForm.unknownDesc.materialContent.fileName}}
                                </el-link>
                            </div>
                        </div>
                        <el-button type="primary" size="small" plain style="margin: 5px 0 0 15px">转人工客服</el-button>
                    </dir>
                    <div class="robotRec" v-show="channelForm.unknownRecStatus == 1">
                        <p :class="['preDesc',{'mb20':channelForm.unknownRecType == 2}]">
                            {{channelForm.unknownRecDesc?channelForm.unknownRecDesc:"未知问题转推荐前置说辞"}}</p>
                        <div v-show="channelForm.unknownRecType == 2">
                            <div class="recQuestion" v-for="(item,i) in channelForm.unknownRecQuestions" :key="i" :title="item.question">
                                {{item.question}}
                            </div>
                        </div>
                    </div>
                    <div class="visitor">
                        <p class="msg">你好，我是人工客服佳佳</p>
                        <img src="../../assets/images/head.png" alt="">
                    </div>
                </div>
                <div class="guideCapsules" v-show="channelForm.guideCapsules.length > 0">
                    <div class="capsules" v-for="(item,i) in channelForm.guideCapsules" :key="i">
                        <a :href="item.link" target="_blank">{{item.name}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import materialSelect from "@/components/materialSelect";
import Tinymce from "@/components/Tinymce";
import RecQuestion from '@/components/RecQuestion';
import guideCards from "@/components/guideCards";
import guideCapsules from "@/components/guideCapsules";
import { getKnowledgeSetList } from "@/api/knowledge.js";
import { lingYanUpload } from "@/utils/upload";
export default {
    name: "channelConfig",
    data() {
        var validateContent = (rule, value, callback) => {
            var index = Number((rule.field.split("."))[1]);
            if (value === '' && this.channelForm.welcome[index].type == 1) {
                callback(new Error('请输入欢迎语内容'));
            } else {
                callback();
            }
        };
        var validateRichContent = (rule, value, callback) => {
            var index = Number((rule.field.split("."))[1]);
            if (value === '' && this.channelForm.welcome[index].type == 2) {
                callback(new Error('请输入欢迎语内容'));
            } else {
                callback();
            }
        };
        var validateMaterial = (rule, value, callback) => {
            var index = Number((rule.field.split("."))[1]);
            if (value === '' && this.channelForm.welcome[index].type == 3) {
                callback(new Error('请选择素材'));
            } else {
                callback();
            }
        };
        var validateWelcDesc = (rule, value, callback) => {
            if (value === '' && this.channelForm.welcomeRecStatus == 1) {
                callback(new Error('前置说辞不能为空'));
            } else {
                callback();
            }
        };
        var validateunknownDesc = (rule, value, callback) => {
            if (value === '' && this.channelForm.unknownRecStatus == 1) {
                callback(new Error('前置说辞不能为空'));
            } else {
                callback();
            }
        };
        return {
            channelForm: {
                robotName: "",
                robotAvatarUrl: "",
                knowledgeSetIds: [],
                welcome: [
                    {
                        type: 1,
                        content: "",
                        richContent: "",
                        material: "",
                        materialType: "graphics"
                    }
                ],
                welcomeRecStatus: 0,
                welcomePreDesc: "",
                welcomeRecQuestionType: 1,
                welcomeRecQuestions: [],
                unknownDesc: {
                    type: 1,
                    content: "",
                    richContent: "",
                    material: "",
                    materialType: "graphics"
                },
                unknownManTakeStatus: 0,
                unknownManTakeType: 1,
                unknownManTakeTimes: 1,
                unknownRecStatus: 0,
                unknownRecDesc: "",
                unknownRecType: 1,
                unknownRecQuestions: [],
                greetingStatus: 0,
                guideCards: [],
                guideCapsules: []
            },
            currentUploadIndex: 0,
            rules: {
                robotName: [{ required: true, message: '请输入渠道机器人名称', trigger: "change" }],
                robotAvatarUrl: [{ required: true, message: '请上传机器人头像' }],
                content: [{ validator: validateContent, trigger: "change" }],
                richContent: [{ validator: validateRichContent, trigger: "change" }],
                material: [{ validator: validateMaterial, trigger: "change" }],
                welcomePreDesc: [{ required: true, validator: validateWelcDesc, trigger: "change" }],
                unknownRecDesc: [{ required: true, validator: validateunknownDesc, trigger: "change" }],
                unknownDesc: { required: true, message: '未知问题说辞内容不能为空', trigger: "change" },
            },
            knowledgeSetList: [],
            scrollClass: "",
        }
    },
    methods: {
        clearFromData() {
            this.$set(this.channelForm, "welcome", [{ type: 1, content: "", richContent: "", material: "", materialType: "graphics" }]);
            this.$set(this.channelForm, "unknownDesc", { type: 1, content: "", richContent: "", material: "", materialType: "graphics" });
            this.$nextTick(() => {
                this.$refs.welcomeTiny0[0].setContent("");
                this.$refs.channelForm.resetFields();
            });
            document.querySelector(".configFrom").scrollTop = 0;
            document.querySelector(".previewContent").scrollTop = 0;
        },
        setFromData(data) {
            data = JSON.parse(JSON.stringify(data));
            var newWelComeList = [];
            var unknownDesc = Object.keys(data.unknownDesc).length > 0 ? data.unknownDesc : { type: 1, value: "" };
            if (data.welcome.length > 0) {
                data.welcome.forEach(item => {
                    var obj = this.formatEcho(item);
                    newWelComeList.push(obj);
                });
            } else {
                newWelComeList = [{ type: 1, content: "", richContent: "", material: "", materialType: "graphics" }];
            }
            data.welcome = newWelComeList;
            data.unknownDesc = this.formatEcho(unknownDesc);
            for (var key in this.channelForm) {
                this.$set(this.channelForm, key, data[key]);
            }
        },
        getFromData() {
            var data;
            this.$refs.channelForm.validate((valid) => {
                if (valid) {
                    var param = JSON.parse(JSON.stringify(this.channelForm));
                    if (param.welcomeRecStatus == 1 && param.welcomeRecQuestionType == 2) { //欢迎语推荐问题
                        if (param.welcomeRecQuestions.length > 0) {
                            let flag = param.welcomeRecQuestions.every(item => item.questionId != "");
                            if (!flag) {
                                data = false;
                                return this.$antMessage.warning("请选择欢迎语推荐问题");
                            }
                        } else {
                            data = false;
                            return this.$antMessage.warning("请选择欢迎语推荐问题");
                        }
                    }
                    if (param.unknownRecStatus == 1 && param.unknownRecType == 2) { //未知问题推荐问题
                        if (param.unknownRecQuestions.length > 0) {
                            let flag = param.unknownRecQuestions.every(item => item.questionId != "");
                            if (!flag) {
                                data = false;
                                return this.$antMessage.warning("请选择未知问题推荐问题");
                            }
                        } else {
                            data = false;
                            return this.$antMessage.warning("请选择未知问题推荐问题");
                        }
                    }
                    if (param.guideCards.length > 0) { //引导卡片
                        let isPass = true;
                        param.guideCards.forEach((item, i) => {
                            if (!item.name) {
                                isPass = false;
                                return this.$antMessage.warning(`请填写卡片${i + 1}名称`);
                            }
                            if (!item.questionId) {
                                isPass = false;
                                return this.$antMessage.warning(`请选择卡片${i + 1}知识点`);
                            }
                            if (!item.coverUrl) {
                                isPass = false;
                                return this.$antMessage.warning(`请上传卡片${i + 1}封面图片`);
                            }
                        });
                        if (!isPass) return;
                    }
                    if (param.guideCapsules.length > 0) { //引导胶囊
                        let isPass = true;
                        var reg = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                        param.guideCapsules.forEach((item, i) => {
                            if (!item.name) {
                                isPass = false;
                                return this.$antMessage.warning(`请填写胶囊${i + 1}名称`);
                            }
                            if (!reg.test(item.link)) {
                                isPass = false;
                                return this.$antMessage.warning(`请填写胶囊${i + 1}链接信息，例如：https://www.baidu.com`);
                            }
                        });
                        if (!isPass) return;
                    }
                    var welcomeList = param.welcome, newWelcomeList = [];
                    welcomeList.forEach(item => {
                        var obj = this.formatSubmit(item);
                        newWelcomeList.push(obj);
                    });
                    param.unknownDesc = this.formatSubmit(param.unknownDesc);
                    param.welcome = newWelcomeList;
                    data = param;
                } else {
                    data = false;
                }
            });
            return data;
        },
        //获取知识集选项
        getKnowledgeSetList() {
            var param = {
                pageNo: 1,
                pageSize: 999
            }
            getKnowledgeSetList(param).then(resp => {
                if (resp.status == 0) {
                    var data = resp.data;
                    this.knowledgeSetList = data.fileList || [];
                }
            });
        },
        async picChange(id, event) {
            var uuid = "uuid-" + new Date().getTime();
            var upload = await lingYanUpload(event.target.files[0], uuid);
            if (upload?.data?.remoteURL) {
                this.$set(this.channelForm, 'robotAvatarUrl', upload.data.remoteURL);
                document.getElementById(id).value = "";
                this.$refs.channelForm.clearValidate("robotAvatarUrl");
            }
        },
        addWelcome() {
            var obj = {
                type: 1,
                content: "",
                richContent: "",
                material: "",
            }
            this.channelForm.welcome.push(obj);
        },
        welcomeUp(index) {
            if (index != 0) {
                var tempOption = this.channelForm.welcome[index - 1];
                this.$set(this.channelForm.welcome, index - 1, this.channelForm.welcome[index]);
                this.$set(this.channelForm.welcome, index, tempOption);
            }
        },
        welcomeDown(index) {
            if (index != this.channelForm.welcome.length - 1) {
                var tempOption = this.channelForm.welcome[index + 1];
                this.$set(this.channelForm.welcome, index + 1, this.channelForm.welcome[index]);
                this.$set(this.channelForm.welcome, index, tempOption);
            }
        },
        delWelCome(index) {
            this.channelForm.welcome.splice(index, 1);
        },
        formatSubmit(item) {
            var obj = {};
            obj.type = item.type;
            if (item.type == "1") {
                obj.value = item.content;
            } else if (item.type == "2") {
                obj.value = item.richContent;
            } else if (item.type == "3") {
                if (item.materialType == "graphics") {
                    obj.type = "3";
                } else if (item.materialType == "picture") {
                    obj.type = "5";
                } else if (item.materialType == "voice") {
                    obj.type = "6";
                } else if (item.materialType == "video") {
                    obj.type = "7";
                } else if (item.materialType == "file") {
                    obj.type = "8";
                }
                obj.value = item.material;
            }
            return obj;
        },
        formatEcho(item) {
            var obj = {
                type: item.type,
                content: "",
                richContent: "",
                material: "",
                materialType: "graphics"
            };
            if (item.type == "1") {
                obj.content = item.value;
            } else if (item.type == "2") {
                obj.richContent = item.value;
            } else if ([3, 5, 6, 7, 8].indexOf(Number(item.type)) > -1) {
                obj.material = item.value;
                if (item.type == 3) {
                    obj.materialType = "graphics";
                } else if (item.type == 5) {
                    obj.materialType = "picture";
                } else if (item.type == 6) {
                    obj.materialType = "voice";
                } else if (item.type == 7) {
                    obj.materialType = "video";
                } else if (item.type == 8) {
                    obj.materialType = "file";
                }
                obj.type = 3;
            }
            return obj;
        },
        welRichTextChange(i) {
            this.$refs.channelForm.clearValidate(`welcome.${i}.richContent`);
        },
        unknownRichChange() {
            this.$refs.channelForm.clearValidate(`unknownDesc.richContent`);
        },
        unknownMaterialChange() {
            this.$refs.channelForm.clearValidate(`unknownDesc.material`);
        }
    },
    created() {
        this.getKnowledgeSetList();
    },
    mounted() {
        var _this = this;
        if (document.querySelector(".configFrom")) {
            document.querySelector(".configFrom").onscroll = function () {
                if (this.scrollTop > 0) {
                    _this.scrollClass = "shadow";
                } else {
                    _this.scrollClass = "";
                }
            }
        }
    },
    components: {
        materialSelect,
        Tinymce,
        RecQuestion,
        guideCards,
        guideCapsules
    }
}
</script>

<style lang="scss">
.channelConfig {
    height: 100%;
    overflow: hidden;
    padding-left: 12px;
    display: flex;
    position: relative;
    padding-top: 10px;
    .configFrom {
        width: 50%;
        flex-shrink: 0;
        overflow-y: scroll;
        height: 100%;
        padding-right: 10px;
        .el-radio__input + .el-radio__label {
            padding-left: 15px;
        }
        .el-radio__input.is-checked + .el-radio__label {
            color: #676e75;
        }
        .flexFrom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 14px;
        }
        .addImg {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            background: #f5f7fa;
            border: 1px solid #dae1e9;
            border-radius: 6px;
            .iconfont {
                font-size: 25px;
                color: #b7c1c9;
            }
        }
        .channelCard {
            margin-left: 130px;
            .el-form-item__content {
                margin-left: 0 !important;
            }
            .cardTitle {
                border-radius: 6px 6px 0 0;
                padding: 0 20px;
                height: 50px;
                background: #eaeef4;
                color: #363c43;
                .iconBtn .iconfont {
                    font-size: 24px;
                    color: #b7c1c9;
                    cursor: pointer;
                    margin-left: 20px;
                    &:hover {
                        color: #abb4bc;
                    }
                    &.disabled {
                        color: #dae1e9 !important;
                    }
                }
            }
            .cardContent {
                background: #f5f7fa;
                padding: 12px 20px 20px;
                border-radius: 0 0 6px 6px;
                margin-bottom: 20px;
                .cardSelect {
                    margin-bottom: 10px;
                    & ~ .el-form-item {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
    .preview {
        width: 50%;
        margin-left: 20px;
    }
    &.shadow::before {
        content: "";
        position: absolute;
        top: -20px;
        left: 0;
        width: 100%;
        height: 20px;
        box-shadow: 0px 3px 15px 0px rgb(102 112 123 / 30%);
    }
}
.channelPreview {
    margin-top: 20px;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 6px;
    height: calc(100% - 40px);
    position: relative;
    .previewContent {
        height: 100%;
        overflow-y: scroll;
        background: #fff;
        padding: 20px;
        .titleTime {
            text-align: center;
            color: #90979d;
        }
        .robot {
            margin-top: 20px;
            display: flex;
            .msg {
                background: #f0f3f7;
                padding: 10px 20px 10px;
                color: #363c43;
                max-width: 50%;
                border-radius: 20px 20px 20px 0px;
                word-break: break-all;
                img {
                    max-width: 100%;
                }
            }
            .el-image {
                width: 40px;
                height: 40px;
                margin-right: 15px;
                border-radius: 50%;
                .image-slot {
                    font-size: 20px;
                    text-align: center;
                    line-height: 40px;
                    color: #b7c1c9;
                    background: #f0f3f7;
                    border-radius: 50%;
                }
            }
            .material {
                max-width: 50%;
                .graphics {
                    .graphicsItem {
                        position: relative;
                        width: 250px;
                        height: 125px;
                        cursor: pointer;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                        .title {
                            position: absolute;
                            bottom: 0px;
                            left: 0px;
                            color: #fff;
                            background: linear-gradient(
                                transparent,
                                rgba(0, 0, 0, 0.4)
                            );
                            height: 30px;
                            line-height: 30px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            width: 100%;
                            padding-left: 10px;
                        }
                    }
                }
                video,
                image {
                    max-width: 100%;
                }
            }
        }
        .visitor {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
            .msg {
                color: #fff;
                background: #6b5ee2;
                padding: 0 20px;
                border-radius: 20px 20px 0px 20px;
                height: 40px;
                line-height: 40px;
                margin-right: 15px;
            }
            img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }
        .robotRec {
            margin-top: 20px;
            margin-left: 55px;
            width: 50%;
            padding: 15px 20px 20px;
            border-radius: 20px;
            background: #f0f3f7;
            .preDesc {
                color: #363c43;
            }
            .recQuestion {
                color: #6b5ee2;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border-radius: 6px;
                background: #fff;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0 10px;
                margin-bottom: 15px;
            }
        }
        &.hasCapsules {
            height: calc(100% - 49px);
        }
    }
    .guideCapsules {
        padding: 10px 0 5px 20px;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: calc(100% - 40px);
        background: #fff;
        .capsules {
            display: inline-block;
            height: 34px;
            line-height: 34px;
            padding: 0 23px;
            color: #6b5ee2;
            border: 1px solid #6b5ee2;
            border-radius: 20px;
            margin-right: 20px;
        }
    }
}
</style>